<template>

    <!-- 柱状图 -->
  <div>
    <div id="main" style="width: 600px;height:400px;"></div>
    <div id="main1" style="width: 1000px;height:400px;"></div>
  </div>
</template>

<script>
export default {
  name: 'Echarts',
  methods:{
	  myEcharts(){
		  // 基于准备好的dom，初始化echarts实例
		  var myChart = this.$echarts.init(document.getElementById('main'));
		  // 指定图表的配置项和数据
		  var option = {
			      legend: {
              left: "3%",
              top: "13%"
            },
            grid: {
              top: "30%"
            },
			       tooltip: {},

			       dataset: {
			           dimensions: ['product', '原厂油液类期初库存金额', '原厂油液类期末库存金额', '非原厂油液类期初库存金额','非原厂油液类期末库存金额'],
			           source: [
			               {product: '一月', '原厂油液类期初库存金额': 43.3, '原厂油液类期末库存金额': 85.8, '非原厂油液类期初库存金额': 93.7,'非原厂油液类期末库存金额':88.2},
			               {product: '二月', '原厂油液类期初库存金额' : 83.1, '原厂油液类期末库存金额': 73.4, '非原厂油液类期初库存金额': 55.1,'非原厂油液类期末库存金额':60.2},
			               {product: '三月', '原厂油液类期初库存金额': 86.4, '原厂油液类期末库存金额': 65.2, '非原厂油液类期初库存金额': 82.5,'非原厂油液类期末库存金额':70.3},
			               {product: '四月', '原厂油液类期初库存金额': 72.4, '原厂油液类期末库存金额': 53.9, '非原厂油液类期初库存金额': 39.1,'非原厂油液类期末库存金额':40.8},
                ]

			       },
             toolbox: {
                 show: true,
                 feature: {
                     dataView: {readOnly: true},        //readOnly只读模式
                     magicType: {type: ['line', 'bar']},
                     restore: {},
                     saveAsImage: {}
                 }
             },
			       xAxis: {type: 'category'},
			       yAxis: {},
			       // Declare several bar series, each will be mapped
			       // to a column of dataset.source by default.
			       series: [
			           {type: 'bar'},
			           {type: 'bar'},
			           {type: 'bar'}
			       ],

		  };

		  // 使用刚指定的配置项和数据显示图表。
		  myChart.setOption(option);
		  },

      myEcharts1(){
        // 基于准备好的dom，初始化echarts实例
        var myChart = this.$echarts.init(document.getElementById('main1'));
        var xDataArr = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月','九月','十月','十一月','十二月']//x轴数据
        var yDataArr = [88, 92, 63, 77, 94, 80, 72, 86,22,15,66,32]                             //y轴数据
        // 指定图表的配置项和数据
        var option = {
              xAxis: {
                      type: 'category',
                      data: xDataArr
                  },
                  yAxis: {
                      type: 'value'
                  },
                  series: [{
                      data: yDataArr,
                      type: 'bar'
                  }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        },
  },
  mounted() {
  	this.myEcharts();
    this.myEcharts1();
  }
}
</script>

<style>

</style>
